<template lang="html">
  <div v-loading="loading" class="main-panel">
    <el-table
      :data="userTableData"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="nickname"
        label="昵称"
        width="200"
      />
      <el-table-column
        prop="mobile_number"
        label="手机号"
        width="200"
      />
      <el-table-column
        prop="id_card"
        label="身份证号"
      />
      <el-table-column
        prop="login_time"
        label="登录时间"
        width="200"
      >
        <template slot-scope="scope">
          {{ scope.row.login_time=='1970-01-01 08:00:00'? '' : scope.row.login_time }}
        </template>
      </el-table-column>
      <el-table-column
        prop="login_ip"
        label="登录IP地址"
        width="200"
      />
      <el-table-column
        prop="groupInfo.name"
        label="身份"
      >

        <template slot-scope="scope">
          {{ scope.row.groupInfo.name }}
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="140"
      >
        <template slot-scope="scope">
          <b>
            {{ scope.row.status===1? '' : '禁用' }}
          </b>
        </template>
      </el-table-column>
      <!-- <el-table-column
        fixed="right"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">查看</el-button>
          <el-button type="text" size="small">编辑</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div style="text-align:center;margin-top:20px">
      <el-pagination
        :current-page="userTableDataPaginateCurrentPage"
        :page-sizes="userTableDataPaginateTotalPageSizes"
        :page-size="userTableDataPaginateTotalPageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="userTableDataPaginateTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
        <!-- <span>当前{{ userTableDataPaginateCurrentPage }}页，</span>
                        <span>共{{ userTableDataPaginateLastPage }}页</span> -->
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      userSearchForm: {},
      userTableData: [],
      userTableDataPaginateCurrentPage: 1,
      userTableDataPaginateTotal: 1,
      userTableDataPaginateLastPage: 1,
      userTableDataPaginateTotalPageSize: 10,
      userTableDataPaginateTotalPageSizes: [10, 20, 50, 100]
    }
  },
  created() {
    this.getUserList()
    // this.treeData = this.getTreeData(this.allRoute)
  },
  methods: {
    handleClick(row) {
      // console.log(row)
    },
    handleSizeChange(val) {
    // 改变每页显示的条数
      this.userTableDataPaginateTotalPageSize = val
      this.getUserList(1, this.userTableDataPaginateTotalPageSize)
    },
    handleCurrentChange(val) {
      this.getUserList(val, this.userTableDataPaginateTotalPageSize)
    },
    getUserList(page = 1, limit = 10) {
      this.loading = true
      this.userSearchForm.page = page
      this.userSearchForm.limit = limit
      this.$store.dispatch('admin/getUserList', this.userSearchForm).then((res) => {
        this.userTableData = res.data.data
        this.userTableDataPaginateTotal = res.data.total
        this.userTableDataPaginateCurrentPage = res.data.current_page
        this.userTableDataPaginateLastPage = res.data.last_page
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.main-panel {
    padding: 18px;
    font-size: 10px;
}
</style>
